<template>
  <view class="create-album">
    <!-- 相册封面 -->
    <view class="cover-section">
      <view class="section-title">相册封面</view>
      <view class="cover-upload" @click="chooseCover">
        <image 
          v-if="albumData.cover" 
          :src="albumData.cover" 
          mode="aspectFill" 
          class="cover-image"
        ></image>
        <!-- 上传状态指示器 -->
        <view class="upload-status" v-if="uploadStatus">
          <u-icon :name="uploadStatus === 'success' ? 'checkmark-circle' : 'close-circle'" 
                  :color="uploadStatus === 'success' ? '#3a8838' : '#ff5a5f'"
                  size="40">
          </u-icon>
        </view>
        <view v-else class="upload-placeholder">
          <u-icon name="camera" size="48" color="#999"></u-icon>
          <text>点击选择封面（选填）</text>
        </view>
      </view>
    </view>
    
    <!-- 相册信息 -->
    <view class="info-section">
      <view class="section-title">相册信息</view>
      <view class="input-group">
        <input 
          class="album-name" 
          v-model="albumData.title"
          placeholder="请输入相册名称"
          maxlength="20"
        />
        <text class="input-count">{{albumData.title.length}}/20</text>
      </view>
      
      <textarea 
        class="album-desc"
        v-model="albumData.description"
        placeholder="添加相册描述（选填）"
        maxlength="200"
      ></textarea>
    </view>
    
    <!-- 权限设置 -->
    <view class="permission-section">
      <view class="section-title">权限设置</view>
      <view class="permission-item">
        <text>设为私密相册</text>
        <u-switch 
          v-model="albumData.status" 
          active-value="0" 
          inactive-value="1"
        ></u-switch>
      </view>
    </view>
    
    <!-- 创建按钮 -->
    <view class="bottom-bar">
      <button 
        class="create-btn" 
        :disabled="!canCreate"
        @click="createAlbum"
      >创建相册</button>
    </view>
  </view>
</template>

<script>
import { createAlbum } from '@/api/album.js'
import { uploadPhoto } from '@/api/photo.js'
import config from '@/config/index.js'

export default {
  data() {
    return {
      albumData: {
        cover: '',        // 封面预览地址
        coverPath: '',    // 封面文件路径
        coverPhotoId: '', // 封面照片ID
        title: '',
        description: '',
        status: '1',
      },
      uploadStatus: '', // success, error 或空
      isSubmitting: false
    }
  },
  computed: {
    canCreate() {
      return this.albumData.title.trim();
    }
  },
  methods: {
    // 选择封面
    chooseCover() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          // 先显示预览
          this.albumData.cover = res.tempFilePaths[0];
          this.albumData.coverPath = res.tempFilePaths[0];
          
          // 立即上传
          try {
            await this.uploadCoverImage(res.tempFilePaths[0]);
          } catch (error) {
            console.error('上传封面失败:', error);
            uni.showToast({
              title: '封面上传失败',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 上传封面图片
    async uploadCoverImage(filePath) {
      this.uploadStatus = ''; // 重置上传状态
      
      try {
        const uploadResult = await uploadPhoto({
          file: filePath,
          title: this.albumData.title ? (this.albumData.title + '的封面') : '相册封面',
          status: this.albumData.status
        });
        
        this.uploadStatus = 'success';
        this.albumData.coverPhotoId = uploadResult.data;
        return uploadResult.data;
      } catch (error) {
        this.uploadStatus = 'error';
        uni.showToast({
          title: error.message || '上传封面失败',
          icon: 'none'
        });
        throw error;
      }
    },
    
    // 创建相册
    async createAlbum() {
      if (!this.canCreate) return;
      if (this.isSubmitting) return;
      
      this.isSubmitting = true;
      uni.showLoading({
        title: '创建中...',
        mask: true
      });
      
      try {
        const albumData = {
          title: this.albumData.title,
          description: this.albumData.description || '',
          status: this.albumData.status === '0' ? '0' : '1'
        };
        
        if (this.albumData.coverPhotoId) {
          albumData.coverPhotoId = this.albumData.coverPhotoId;
        }
        
        const result = await createAlbum(albumData);
        uni.hideLoading();
        uni.showToast({
          title: '创建成功',
          icon: 'success'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      } catch (error) {
        console.error('创建相册失败:', error);
        uni.hideLoading();
        uni.showToast({
          title: error.message || '创建相册失败',
          icon: 'none'
        });
      } finally {
        this.isSubmitting = false;
      }
    }
  }
}
</script>

<style>
.create-album {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 120rpx;
}

.section-title {
  font-size: 28rpx;
  color: #666;
  padding: 30rpx;
}

/* 封面上传区域 */
.cover-section {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.cover-upload {
  margin: 0 30rpx 30rpx;
  height: 400rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-placeholder {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
}

.upload-placeholder text {
  font-size: 26rpx;
  color: #999;
}

/* 信息填写区域 */
.info-section {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.input-group {
  margin: 0 30rpx;
  padding-bottom: 20rpx;
  position: relative;
  border-bottom: 1px solid #f5f5f5;
}

.album-name {
  height: 80rpx;
  font-size: 28rpx;
}

.input-count {
  position: absolute;
  right: 0;
  bottom: 20rpx;
  font-size: 24rpx;
  color: #999;
}

.album-desc {
  margin: 20rpx 30rpx;
  height: 160rpx;
  font-size: 28rpx;
  line-height: 1.5;
}

/* 权限设置区域 */
.permission-section {
  background-color: #fff;
}

.permission-item {
  margin: 0 30rpx;
  padding: 30rpx 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f5f5f5;
}

.permission-item:last-child {
  border-bottom: none;
}

.permission-item text {
  font-size: 28rpx;
  color: #333;
}

/* 底部按钮 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.create-btn {
  background-color: #3a8838;
  color: #fff;
  border-radius: 45rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 32rpx;
}

.create-btn[disabled] {
  background-color: #ccc;
  color: #fff;
}

/* 添加上传状态样式 */
.upload-status {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  padding: 6rpx;
}
</style> 